<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>控制器</el-breadcrumb-item>
            <el-breadcrumb-item>更新</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>

    <el-table :data="tableAttr" border style="width: 100%">
      <el-table-column prop="index" label="INDEX">
        <template scope="scope">
          <span class="link" @click="getDetail(scope.row.index)">{{scope.row.index}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="NAME">
        <template scope="scope">
          <span class="link" @click="getDetail(scope.row.name)">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="STATE">
      </el-table-column>
      <el-table-column
        prop="primary"
        label="PRIMARY">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.primary">
        </template>
      </el-table-column>
      <el-table-column
        prop="locality"
        label="LOCALITY">
      </el-table-column>
      <el-table-column
        prop="time"
        label="UP TIME(day(hh:mm))">
      </el-table-column>
      <el-table-column
        prop="rp_id"
        label="RP ID">
        <template scope="scope">
          <span>{{scope.row.rp_id.rp}}</span>
          <span>{{scope.row.rp_id.id}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="encl_index"
        label="ENCL INDEX">
      </el-table-column>
      <el-table-column
        prop="ula"
        label="ULA">
      </el-table-column>
      <el-table-column
        prop="icc"
        label="ICC">
        <template scope="scope">
          <span>{{scope.row.icc.status}}</span>
          <span>{{scope.row.icc.content}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="version"
        label="FIRMWARE VERSION">
      </el-table-column>
      <el-table-column
        prop="crash_dump"
        label="CRASH DUMP">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.crash_dump">
        </template>
      </el-table-column>
      <el-table-column
        prop="log_disk"
        label="LOG DISK">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.log_disk">
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <h2 class="form-caption">update firmware for controller b</h2>
      <el-form ref="form" :model="form" label-width="300px">
        <el-form-item label="Select Firmware">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">Note: In order to update the other controller,
              you must connect to the other controller,
              and follow the same steps
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="Restart Controller after Update">
          <el-switch on-text="" off-text="" v-model="form.restart"></el-switch>
        </el-form-item>
      </el-form>
    </el-row>

  </div>
</template>
<script>
  export default {
    name: 'controller_set',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        form: {
          restart: false
        },
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        tableAttr: [{
          index: 0,
          name: 'B',
          state: 'Running',
          primary: true,
          locality: 'LOCAL',
          time: '0 days(0:32)',
          rp_id: {rp: 1, id: '0x0001fffa01d6000'},
          encl_index: 0,
          ula: '0000000s02d0s2s',
          icc: {status: 'up', content: 'DG+MSG+MAD'},
          version: '3.10.0132795',
          crash_dump: true,
          log_disk: false
        }, {
          index: 1,
          name: 'A',
          state: 'Running',
          primary: false,
          locality: 'REMOTE',
          time: '0 days(0:32)',
          rp_id: {rp: 1, id: '0x0001fffa01d6000'},
          encl_index: 2,
          ula: '0fd1f4g1ed25g4',
          icc: {status: 'up', content: 'DG+MSG+MAD'},
          version: '3.10.1547201144',
          crash_dump: false,
          log_disk: true
        }]
      }
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">

</style>
